<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图层树</title>
    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/Vue3.js"></script>
    <script type="text/javascript" src="./lib/ElementPlus/index.js"></script>
    <link rel="stylesheet" href="./lib/ElementPlus/index.css" />
  </head>
  <body>
    <div id="dom">
      <div id="player"></div>

      <div id="layertree">
        <div class="heard">
          <div class="heard-title">图层信息</div>
        </div>
        <!-- 图层树初始面板 https://element-plus.org/zh-CN/component/tree.html-->

        <!-- 图层树 -->
        <el-tree
          class="tree"
          :data="infoTree"
          show-checkbox
          node-key="id"
          ref="Tree"
          @node-click="handleNodeClick"
          @check="infoTreeCheck"
          :default-checked-keys="defaultCheck"
          :default-expanded-keys="['ProjectTree_Root']"
          :highlight-current="true"
        >
          <template #default="node">
            <span class="node-label customTreeNode">
              <span
                :title="node.data.label"
                class="text"
                @dblclick="FocusModel(node.data)"
                >{{ node.data.label }}</span
              >
            </span>
          </template>
        </el-tree>

        <div @click.stop class="set-style" v-if="curClicked">
          <el-color-picker
            v-model="options.color"
            color-format="rgb"
            @change="setTileLayerStyle(curClicked.id,options)"
          ></el-color-picker>
          <el-select
            :popper-append-to-body="false"
            v-model="options.style"
            @change="setTileLayerStyle(curClicked.id,options)"
          >
            <el-option
              v-for="item in styleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, ref, computed } = Vue

      const infoTreeTest = ref([
          {
            label: '世界',
            children: [
              {
                label: '地形影像',
                children: [
                  {
                    label: '地形影像1'
                  },
                  {
                    label: '地形影像2'
                  }
                ]
              },
              {
                label: '倾斜摄影',
                children: [
                  {
                    label: '倾斜摄影1'
                  },
                  {
                    label: '倾斜摄影2'
                  }
                ]
              },
              {
                label: 'max模型',
                children: [
                  {
                    label: 'max模型1'
                  },
                  {
                    label: 'max模型2'
                  }
                ]
              }
            ]
          }
        ]),
        infoTree = ref(''), // 图层树
        defaultInfoTree = ref([]), // dts获取的图层树信息
        defaultCheck = ref([]) // 默认显示的图层

      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          // reset: true,
          apiOptions: {
            onReady: async () => {
              // 获取图层树对象
              const res = await fdapi.infoTree.get()
              // 构造为图层树数据结构，并进行存储
              infoTree.value = toTree(res.infotree)
              defaultInfoTree.value = res.infotree
            }
          }
        })
      }

      // 把获取到的图层树对象，转为图层树数据格式
      const toTree = data => {
        const fixedArr = data.map(item => {
          if (
            item.type !== 'EPT_Folder' &&
            item.type !== 'EPT_World' &&
            item.visiblity === true
          )
            defaultCheck.value.push(item.iD)

          return {
            label: item.name,
            id: item.iD,
            visiblity: item.visiblity,
            index: item.index,
            parentIndex: item.parentIndex,
            color: item.color
              ? item.color.replace('RGB', 'rgb')
              : 'rgb(255, 255, 255)',
            style: item.style ? item.style : 0,
            type: item.type
          }
        })
        // 返回一个包含所有元素及其父子关系的树形结构数组
        const map = {}
        fixedArr.forEach(function (item) {
          map[item.index] = item
        })

        const val = []
        fixedArr.forEach(function (item) {
          const parent = map[item.parentIndex]
          if (parent) {
            ;(parent.children || (parent.children = [])).push(item)
          } else {
            val.push(item)
          }
        })
        return val
      }

      // 模型定位
      const FocusModel = data => {
        if (!data.children) {
          fdapi.infoTree.focus(data.id)
        }
      }

      // 图层树选中事件-显示隐藏图层
      const infoTreeCheck = async (node, obj) => {
        if (obj.checkedKeys.includes(node.id)) {
          fdapi.infoTree.show(node.id)
        } else {
          fdapi.infoTree.hide(node.id)
        }
      }

      // 当前选中的对象
      const curClicked = ref(),
        // 选中对象的设置参数
        options = ref({
          color: 'rgb(255,255,255)',
          style: 0
        }),
        styleList = ref([
          {
            value: 0,
            label: '默认'
          },
          {
            value: 1,
            label: 'X光'
          },
          {
            value: 2,
            label: '纯色'
          },
          {
            value: 3,
            label: '水晶体'
          },
          {
            value: 4,
            label: '暗黑'
          },
          {
            value: 5,
            label: '科幻'
          },
          {
            value: 6,
            label: '扩散'
          }
        ])

      // 选中节点
      const handleNodeClick = data => {
        // 如果不是最小节点或模型文件，则直接无视
        if (data.children || data.type !== 'EPT_Scene') {
          curClicked.value = null
          return
        }

        // 获取当前点击模型的样式
        let cur = defaultInfoTree.value.find(item => {
          return item.iD === data.id
        })
        curClicked.value = data
        options.value.color = cur.color
          ? cur.color.replace('RGB', 'rgb')
          : 'rgb(255,255,255)'
        options.value.style = cur.style || 0
      }

      // 设置图层样式
      const setTileLayerStyle = (id, options) => {
        if (id) {
          fdapi.tileLayer.setStyle(id, options.style, options.color)

          defaultInfoTree.value.find(item => {
            if (item.iD === id) {
              item.style = options.style
              item.color = options.color
            }
            return item.iD === id
          })
        }
      }

      const app = createApp({
        setup() {
          return {
            infoTreeTest,
            infoTree,
            defaultCheck,

            infoTreeCheck,
            handleNodeClick,
            FocusModel,

            styleList,
            curClicked,
            options,
            setTileLayerStyle
          }
        }
      })
      app.use(ElementPlus).mount('#dom')

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
